<template>
  <div>
    <Header active="manage" show-search-menu @searchClick="handleSearch"></Header>
    <div class="">
      <div class="container mx-auto">
        <div class="mb-4">
          <select v-model="params.paramTag" class="select select-bordered mr-2 w-full max-w-xs">
            <option selected="selected" value="">标签：全部</option>
            <option v-for="(item, i) in pageData.tagList" :value="item.label">
              {{ item.label }}
            </option>
          </select>
          <button class="btn btn-primary mr-2" @click="modalsActive.showCreateArticleModal = true">
            新增文章
          </button>
        </div>
        <div class="overflow-x-auto">
          <table class="table w-full">
            <thead>
              <tr>
                <th>ID</th>
                <th>标题</th>
                <th>标签</th>
                <th>状态</th>
                <th>创建/修改时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in pageData.articleList">
                <td>{{ item.id }}</td>
                <td>
                  <button
                    class="btn btn-ghost btn-sm badge badge-info"
                    @click="showEditArticleTitleModal(item.id, item.title)"
                  >
                    {{ item.title }}
                  </button>
                </td>
                <td>
                  <button
                    class="btn btn-ghost btn-sm badge badge-primary"
                    @click="showEditTagNameModal(item.tag_id, item.tag)"
                  >
                    {{ item.tag }}
                  </button>
                  <button
                    class="btn btn-outline btn-xs ml-2"
                    @click="showEditArticleTagModal(item.id, item.tag)"
                  >
                    修改
                  </button>
                </td>
                <td>
                  <button
                    :class="[item.status === 1 ? 'badge-success' : 'badge-warning']"
                    class="btn btn-ghost btn-sm badge"
                    @click="doToggleArticleStatus(item.id, item.status)"
                  >
                    {{ item.status === 1 ? '公开' : '私有' }}
                  </button>
                </td>
                <td>{{ item.create_time }}/{{ item.update_time }}</td>
                <th>
                  <button
                    class="btn btn-info btn-sm mr-1"
                    @click="$router.push('/editor/' + item.id)"
                  >
                    编辑
                  </button>
                  <button
                    class="btn btn-sm btn-warning mr-1"
                    @click="showDeleteArticleModal(item.id)"
                  >
                    删除
                  </button>
                  <button
                    class="btn btn-sm btn-outline"
                    @click="$router.push('/article/' + item.id)"
                  >
                    查看
                  </button>
                </th>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="flex justify-center mt-5">
          <Pagination
            v-model:current-page="params.paramPage"
            :total-count="pageData.totalArticleCount"
          ></Pagination>
        </div>
      </div>
    </div>
    <div :class="{ 'modal-open': modalsActive.showCreateArticleModal }" class="modal">
      <div class="modal-box">
        <div class="form-control">
          <label class="label">
            <span class="label-text">创建文章</span>
          </label>
          <input
            v-model="paramsCreateArticle.title"
            class="input input-bordered"
            placeholder="标题"
            type="text"
          />
        </div>

        <div class="mt-2">
          <input
            v-model="paramsCreateArticle.tag"
            class="input input-bordered"
            placeholder="新增标签名"
            type="text"
          />
          <select
            v-model="paramsCreateArticle.tag"
            class="select select-bordered w-full max-w-xs mt-2"
          >
            <option disabled="disabled" selected="selected" value="">选择已有标签</option>
            <option v-for="(item, i) in pageData.tagList" :value="item.label">
              {{ item.label }}
            </option>
          </select>
        </div>

        <select
          v-model="paramsCreateArticle.status"
          class="select select-bordered w-full max-w-xs mt-2"
        >
          <option disabled="disabled" selected="selected" value="null">选择状态</option>
          <option value="1">开放</option>
          <option value="2">私有</option>
        </select>

        <div class="modal-action">
          <label class="btn btn-primary" @click="doCreateArticle">确定</label>
          <label class="btn" @click="modalsActive.showCreateArticleModal = false">取消</label>
        </div>
      </div>
    </div>
    <div :class="{ 'modal-open': modalsActive.showEditArticleTitleModal }" class="modal">
      <div class="modal-box">
        <div class="form-control">
          <label class="label">
            <span class="label-text">修改标题</span>
          </label>
          <input
            v-model="paramsEditArticleTitle.title"
            class="input input-bordered"
            placeholder="标题"
            type="text"
          />
        </div>

        <div class="modal-action">
          <label class="btn btn-primary" @click="doEditArticleTitle">确定</label>
          <label class="btn" @click="modalsActive.showEditArticleTitleModal = false">取消</label>
        </div>
      </div>
    </div>
    <div :class="{ 'modal-open': modalsActive.showDeleteArticleModal }" class="modal">
      <div class="modal-box">
        <div class="alert bg-white">
          <div class="flex-1">
            <svg
              class="w-6 h-6 mx-2"
              fill="none"
              stroke="#2196f3"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              ></path>
            </svg>
            <label class="text-xl">删除该文章？</label>
          </div>
        </div>
        <div class="modal-action">
          <label class="btn btn-error" @click="doDeleteArticle">确定</label>
          <label class="btn" @click="modalsActive.showDeleteArticleModal = false">取消</label>
        </div>
      </div>
    </div>
    <div :class="{ 'modal-open': modalsActive.showEditArticleTagModal }" class="modal">
      <div class="modal-box">
        <div class="label-text mb-2">修改标签</div>
        <select
          v-model="paramsEditArticleTag.tag"
          class="select select-bordered w-full max-w-xs mt-2"
        >
          <option disabled="disabled" selected="selected" value="">选择已有标签</option>
          <option v-for="(item, i) in pageData.tagList" :key="i" :value="item.label">
            {{ item.label }}
          </option>
        </select>
        <div class="modal-action">
          <label class="btn btn-error" @click="doEditArticleTag">确定</label>
          <label class="btn" @click="modalsActive.showEditArticleTagModal = false">取消</label>
        </div>
      </div>
    </div>

    <div :class="{ 'modal-open': modalsActive.showEditTagNameModal }" class="modal">
      <div class="modal-box">
        <div class="label-text mb-2">修改标签名</div>
        <input
          v-model="paramsEditTagName.tagName"
          class="input input-bordered"
          placeholder="标题"
          type="text"
        />
        <div class="modal-action">
          <label class="btn btn-error" @click="doEditTagName">确定</label>
          <label class="btn" @click="modalsActive.showEditTagNameModal = false">取消</label>
        </div>
      </div>
    </div>

    <AppFooter></AppFooter>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, watch } from 'vue'
import Header from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'
import Pagination from '@/components/Pagination.vue'
import * as articleApi from '@/http/article'

export default defineComponent({
  components: {
    AppFooter,
    Pagination,
    Header
  },
  setup() {
    const modalsActive = reactive({
      showCreateArticleModal: false,
      showEditArticleTitleModal: false,
      showDeleteArticleModal: false,
      showEditArticleTagModal: false,
      showEditTagNameModal: false
    })

    const params = reactive({
      paramTag: '',
      paramKeyword: '',
      paramSize: 10,
      paramPage: 1
    })

    const paramsCreateArticle = reactive({
      title: '',
      tag: '',
      status: null
    })

    const paramsEditArticleTitle = reactive({
      id: null,
      title: ''
    })

    const paramsEditArticleTag = reactive({
      id: null,
      tag: ''
    })

    const paramsEditTagName = reactive({
      id: null,
      tagName: ''
    })

    const paramDeleteArticleID = ref(0)

    const pageData = reactive({
      articleList: [],
      tagList: [],
      totalArticleCount: 0
    })

    const initPageData = () => {
      articleApi
        .apiGetArticles(params.paramPage, params.paramSize, params.paramTag, params.paramKeyword)
        .then((res) => {
          pageData.articleList = res.data.list
          pageData.totalArticleCount = res.data.total_count
        })

      articleApi.apiGetTags().then((res) => {
        pageData.tagList = res.data.list
      })
    }

    watch(
      () => params.paramPage,
      () => {
        initPageData()
      }
    )

    watch(
      () => params.paramTag,
      () => {
        params.paramPage = 1
        initPageData()
      }
    )

    initPageData()

    function handleSearch(k) {
      params.paramPage = 1
      params.paramKeyword = k
      initPageData()
    }

    function showEditArticleTitleModal(id, title) {
      paramsEditArticleTitle.title = title
      paramsEditArticleTitle.id = id
      modalsActive.showEditArticleTitleModal = true
    }

    function doCreateArticle() {
      articleApi
        .apiPostArticle(
          paramsCreateArticle.title,
          paramsCreateArticle.tag,
          paramsCreateArticle.status
        )
        .then((res) => {
          window.notyf.success('创建成功')
          initPageData()
          modalsActive.showCreateArticleModal = false
        })
        .catch((res) => {
          // window.notyf.error('创建失败')
        })
    }

    function doEditArticleTitle() {
      articleApi
        .apiPutArticleTitle(paramsEditArticleTitle.id, paramsEditArticleTitle.title)
        .then((res) => {
          window.notyf.success('修改成功')
          initPageData()
          modalsActive.showEditArticleTitleModal = false
        })
    }

    function doToggleArticleStatus(id, currentStatus) {
      let status = 1
      if (currentStatus === 1) {
        status = 2
      } else {
        status = 1
      }
      articleApi.apiPutArticleStatus(id, status).then((res) => {
        window.notyf.success('修改成功')
        initPageData()
      })
    }

    function doDeleteArticle() {
      articleApi.apiDeleteArticle(paramDeleteArticleID.value).then((res) => {
        window.notyf.success('删除成功')
        initPageData()
        modalsActive.showDeleteArticleModal = false
      })
    }

    function showEditArticleTagModal(id, tag) {
      paramsEditArticleTag.id = id
      paramsEditArticleTag.tag = tag
      modalsActive.showEditArticleTagModal = true
    }

    function doEditArticleTag() {
      articleApi.apiPutArticleTag(paramsEditArticleTag.id, paramsEditArticleTag.tag).then((res) => {
        window.notyf.success('修改成功')
        initPageData()
        modalsActive.showEditArticleTagModal = false
      })
    }

    function showDeleteArticleModal(id) {
      paramDeleteArticleID.value = id
      modalsActive.showDeleteArticleModal = true
    }

    function showEditTagNameModal(id, tag) {
      paramsEditTagName.id = id
      paramsEditTagName.tagName = tag
      modalsActive.showEditTagNameModal = true
    }

    function doEditTagName() {
      articleApi.apiPutTags(paramsEditTagName.id, paramsEditTagName.tagName).then(() => {
        window.notyf.success('修改成功')
        initPageData()
        modalsActive.showEditTagNameModal = false
      })
    }

    return {
      handleSearch,
      showDeleteArticleModal,
      doEditTagName,
      doCreateArticle,
      showEditTagNameModal,
      doDeleteArticle,
      paramsEditArticleTag,
      paramDeleteArticleID,
      paramsEditArticleTitle,
      showEditArticleTagModal,
      doEditArticleTag,
      doToggleArticleStatus,
      showEditArticleTitleModal,
      doEditArticleTitle,
      paramsEditTagName,
      params,
      modalsActive,
      pageData,
      paramsCreateArticle
    }
  }
})
</script>
